<style>
    .add-box{ border: solid 1px rgb(224, 224, 224); height: 150px;}
    .add-box:hover{border-color: rgb(251, 59, 59); transition: ease .5s;}
    .add-box .btn-default{position: absolute;top: 0;right: 0;}
    .active{border-color: rgb(251, 59, 59);}
    .meng-box {display: none;}
    .add-box:hover .meng-box{
        display: block; 
        position: absolute;
        top:0; 
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.755);
        transition: ease .5s;
    }
</style>

<div id="address">
    <div class="columns is-multiline">
        <div class="column is-3" v-for="addr in addressData" :key="addr.id">
            <b-loading :is-full-page="false" v-model="isLoading" :can-cancel="true"></b-loading>
            <div class="add-box is-clickable is-flex is-flex-direction-column is-align-items-start is-justify-content-center is-relative pl-5 pr-5"
                :class="{active: addr.is_default}" @click="pickAddress(addr)">

                {% if update or delete %}
                <div class="meng-box">
                    <div class=" buttons is-flex is-align-items-center is-justify-content-center" style="height:100%">
                        {% if update %}
                        <div class="button is-success is-light is-small" @click="updateAddress(addr)">
                            <span class="icon"><i class="mdi mdi-book-edit-outline"></i></span>
                            <span>编辑</span>
                        </div>
                        {% endif %}

                        {% if delete %}
                        <div class="button is-danger is-light is-small" @click="delAddress(addr.id)">
                            <span class="icon"><i class="mdi mdi-delete-alert-outline"></i></span>
                            <span>删除</span>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <span class="tag is-danger btn-default is-radiusless" v-if="addr.is_default">{$ text $}</span>
                <h1 class="has-text-weight-bold">{$ addr.name $}</h1>
                <p>{$ addr.phone $}</p>
                <p>{$ addr.province $}{$ addr.city $}{$ addr.country $}{$ addr.address $}</p>
            </div>
        </div>
        <div class="column is-3">
            <div class="add-box is-clickable is-flex is-flex-direction-column is-align-items-center is-justify-content-center"
                @click="openModal">
                <span class="icon is-size-1 has-text-grey-light"><i class="mdi mdi-plus"></i></span>
                <p class="mt-3 has-text-grey-light">添加新地址</p>
            </div>
        </div>
    </div>
    <b-modal
        v-model="isComponentModalActive"
        has-modal-card
        :can-cancel="false">
        <modal-form v-bind="formProps"></modal-form>
    </b-modal>
</div>

<script>
    const ModalForm = {
        props: ['id', 'name', 'phone', 'email', 'province', 'city', 'country', 'address', 'is_default'],
        data(){
            return {
                labelPosition: 'on-border',
                formProps: {
                    'id': this.id || null,
                    'name': this.name || "",
                    'phone': this.phone || "",
                    'email': this.email || "",
                    'province': this.province || "",
                    'city': this.city || "",
                    'country': this.country || "",
                    'address': this.address || "",
                    'is_default': this.is_default || false
                }
            }
        },
        template: `
            <div class="modal-card" style="min-width: 200px">
                <header class="modal-card-head">
                    <p class="modal-card-title">收货地址</p>
                </header>
                <section class="modal-card-body">
                    <b-field label="收件人" :label-position="labelPosition">
                        <b-input
                            v-model="formProps.name"
                            type="text"
                            :value="formProps.name"
                            placeholder="Your name"
                            required>
                        </b-input>
                    </b-field>

                    <b-field label="手机号" :label-position="labelPosition">
                        <b-input
                            v-model="formProps.phone"
                            type="text"
                            :value="formProps.phone"
                            placeholder="Your phone"
                            :hasCounter="false"
                            :maxlength="11"
                            pattern="[1][3,4,5,7,8,9][0-9]{9}"
                            validation-message="手机号格式有误！"
                            required>
                        </b-input>
                    </b-field>
                    <b-field label="省份" :label-position="labelPosition">
                        <b-input
                            v-model="formProps.province"
                            type="text"
                            :value="formProps.province"
                            placeholder="Your province"
                            required>
                        </b-input>
                    </b-field>
                    <b-field label="城市" :label-position="labelPosition">
                        <b-input
                            v-model="formProps.city"
                            type="text"
                            :value="formProps.city"
                            placeholder="Your city"
                            required>
                        </b-input>
                    </b-field>
                    <b-field label="区/县" :label-position="labelPosition">
                        <b-input
                            v-model="formProps.country"
                            type="text"
                            :value="formProps.country"
                            placeholder="Your country"
                            required>
                        </b-input>
                    </b-field>
                    <b-field label="详细地址" :label-position="labelPosition">
                        <b-input
                            v-model="formProps.address"
                            type="text"
                            :value="formProps.address"
                            placeholder="Your address"
                            required>
                        </b-input>
                    </b-field>
                    <b-checkbox v-model="formProps.is_default" :value="formProps.is_default">设为默认</b-checkbox>
                </section>
                <footer class="modal-card-foot">
                    <b-button
                        label="取消"
                        @click="$parent.close()" />
                    <b-button
                        label="保存"
                        type="is-primary"
                        @click="save"/>
                </footer>
            </div>
        `,
        methods: {
            // 保存地址
            save(){
                let api = `{% url "user:modify_address" %}`
                let method = 'post'
                if (this.formProps.id) {
                    api = `{% url "user:modify_address" %}`
                    method = 'put'
                }
                // 数据库修改
                request({
                    method: method,
                    url: api,
                    headers: {'Accept': 'application/json'},
                    data: this.formProps
                }).then(res => {
                    if (res.data.status === 200) {
                        bayke.toastMessage('is-success', res.data.msg);
                        this.$parent.close()
                        location.reload()
                    }
                    else {
                        bayke.toastMessage('is-danger', res.data.errmsg)
                    }
                })
            },
        }
    }
</script>

<script>
    var address = new Vue({
        el: "#address",
        delimiters: ['{$', '$}'],
        components: {
            ModalForm
        },
        data: {
            addressData: [],
            text: "默认",
            isComponentModalActive: false,
            formProps: {},
            isLoading: false
        },
        created() {
            this.getAddress()
        },
        methods: {
            getAddress(){
                this.isLoading = true
                request({
                    url: '{% url "user:modify_address" %}',
                    method: 'get'
                }).then(res => {
                    res.data.data.forEach(el => {
                        this.addressData.push(el)
                        if (el.is_default){
                            this.formProps = el
                        }
                    })
                })
                this.isLoading = false
            },
            // 选择地址
            pickAddress(addr){
                this.formProps = addr;
                this.addressData.forEach(element => {
                    if (addr.id == element.id){
                        addr.is_default = true
                        this.text = "选择 ✔"
                    }else{
                        element.is_default = false
                    }
                })
            },

            // 修改地址
            updateAddress(addr){
                this.isComponentModalActive = true
                this.formProps = addr
            },

            // 新增地址弹窗
            openModal(){
                this.isComponentModalActive = true
                this.formProps = {}
            },

            // delAddress删除
            delAddress(id){
                this.$buefy.dialog.confirm({
                    message: '是否确认删除该地址！',
                    cancelText: '取消',
                    onConfirm: () => {
                        request({
                            method: 'delete',
                            url: `{% url "user:modify_address" %}`,
                            headers: {'Accept': 'application/json'},
                            data: id
                        }).then(res => {
                            if (res.data.status === 200) {
                                bayke.toastMessage('is-success', res.data.msg)
                                location.reload()
                            }
                            else {
                                bayke.toastMessage('is-danger', res.data.errmsg)
                            }
                        })
                    }
                })
            },
        }
    })
</script>